<template>
  <el-dialog
    v-model="dialogTableVisible"
    :show-close="true"
    width="60%"
    :destroy-on-close="true"
    :before-close="handleClose"
  >
    <div style="height: 465px; overflow: hidden">
      <div style="position: absolute; top: 5px">
        <el-input
          style="width: 150px; margin-left: 2px"
          v-model="input1"
          v-if="ifdynamic1"
          :placeholder="dynamicPlaceholder1"
          @keyup.enter="searchInput"
        >
          <template #prefix>
            <el-icon class=""><search /></el-icon>
          </template>
        </el-input>
        <el-input
          style="width: 150px; margin-left: 2px"
          v-model="input2"
          v-if="ifdynamic2"
          :placeholder="dynamicPlaceholder2"
          @keyup.enter="searchInput"
        >
          <template #prefix>
            <el-icon class=""><search /></el-icon>
          </template>
        </el-input>
        <el-input
          style="width: 150px; margin-left: 2px"
          v-model="input3"
          v-if="ifdynamic3"
          :placeholder="dynamicPlaceholder3"
          @keyup.enter="searchInput"
        >
          <template #prefix>
            <el-icon class=""><search /></el-icon>
          </template>
        </el-input>
        <el-input
          style="width: 150px; margin-left: 2px"
          v-model="input4"
          v-if="ifdynamic4"
          :placeholder="dynamicPlaceholder4"
          @keyup.enter="searchInput"
        >
          <template #prefix>
            <el-icon class=""><search /></el-icon>
          </template>
        </el-input>
        <el-input
          style="width: 150px; margin-left: 2px"
          v-model="input5"
          v-if="ifdynamic5"
          :placeholder="dynamicPlaceholder5"
          @keyup.enter="searchInput"
        >
          <template #prefix>
            <el-icon class=""><search /></el-icon>
          </template>
        </el-input>
        <el-input
          style="width: 150px; margin-left: 2px"
          v-model="input6"
          v-if="ifdynamic6"
          :placeholder="dynamicPlaceholder6"
          @keyup.enter="searchInput"
        >
          <template #prefix>
            <el-icon class=""><search /></el-icon>
          </template>
        </el-input>
        <el-input
          style="width: 150px; margin-left: 2px"
          v-model="input7"
          v-if="ifdynamic7"
          :placeholder="dynamicPlaceholder7"
          @keyup.enter="searchInput"
        >
          <template #prefix>
            <el-icon class=""><search /></el-icon>
          </template>
        </el-input>
        <el-input
          style="width: 150px; margin-left: 2px"
          v-model="input8"
          v-if="ifdynamic8"
          :placeholder="dynamicPlaceholder8"
          @keyup.enter="searchInput"
        >
          <template #prefix>
            <el-icon class=""><search /></el-icon>
          </template>
        </el-input>
        <el-button style="margin-left: 5px" @click="searchInput" type="primary"
          >查询</el-button
        >
        <el-button
          v-if="ifRowChoose"
          style="margin-left: 5px"
          @click="ifRowChooseClick"
          type="primary"
          >添加</el-button
        >
      </div>
      <div class="dialogDiv">
        <el-table
          ref="table"
          border
          stripe
          :data="tableData"
          @row-click="RowClick"
          :row-key="(row) => row[compareValue.value]"
          :cell-style="cellStyle"
          :header-cell-style="headerCellStyle"
          @selection-change="handleSelectionChange"
          max-height="420px"
          height="420px"
        >
          <!-- <el-table-column type="index" /> -->
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column
            v-for="(column, index) in tableColumns"
            :key="index"
            :prop="column.prop"
            :label="column.label"
            :width="column.width"
            :align="column.align"
            :fixed="column.fixed"
          >
            <!-- 如果当前列是序号列，则显示序号 -->
            <template v-if="column.type === 'index'" #default="{ $index }">
              <span>{{ $index + 1 }}</span>
            </template>
            <!-- 如果当前列是选择列，则显示复选框 -->
          </el-table-column>
        </el-table>
        <div class="demo-pagination-block" v-if="totalShou">
          <el-pagination
            v-model:current-page="page"
            v-model:page-size="limit"
            :page-sizes="[10, 50, 100, 200]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
import {
  ref,
  provide,
  watch,
  reactive,
  onMounted,
  onBeforeMount,
  computed,
  nextTick,
  onUnmounted,
  toRefs,
  defineEmits,
} from "vue";
import { ElTable, TableColumnCtx, ElMessageBox } from "element-plus";
import { Delete, Edit, Search, Share, Upload, Calendar } from "@element-plus/icons-vue";
import {
  ElButton,
  ElDialog,
  dialogEmits,
  ElMessage,
  FormRules,
  FormInstance,
} from "element-plus";
import { CircleCloseFilled } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import axios from "../../axios/axiosInstance.ts";
import Cookies from "js-cookie";
import { format } from "date-fns";

// 日期中文
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
import * as crud from "../utils/crud.ts";
const dialogTableVisible = ref(false);
const input1 = ref("");
const input2 = ref("");
const input3 = ref("");
const input4 = ref("");
const input5 = ref("");
const input6 = ref("");
const input7 = ref("");
const input8 = ref("");
const input9 = ref("");
const input10 = ref("");
const input11 = ref("");
const input12 = ref("");
const input13 = ref("");
const tableData = ref([]);
const page = ref(1);
const limit = ref(50);
const total = ref(10);
const selectedRows = ref([]);
const table = ref("");
// 是否开启分页
const totalShou = ref(true);
// 控制单选多选操作
const ifRowChoose = ref(false);
// 封装动态搜索框内容
const dynamicPlaceholder1 = ref("");
const dynamicPlaceholder2 = ref("");
const dynamicPlaceholder3 = ref("");
const dynamicPlaceholder4 = ref("");
const dynamicPlaceholder5 = ref("");
const dynamicPlaceholder6 = ref("");
const dynamicPlaceholder7 = ref("");
const dynamicPlaceholder8 = ref("");
const dynamicPlaceholder9 = ref("");
const dynamicPlaceholder10 = ref("");
const dynamicPlaceholder11 = ref("");
const dynamicPlaceholder12 = ref("");
const dynamicPlaceholder13 = ref("");
const ifdynamic1 = ref(false);
const ifdynamic2 = ref(false);
const ifdynamic3 = ref(false);
const ifdynamic4 = ref(false);
const ifdynamic5 = ref(false);
const ifdynamic6 = ref(false);
const ifdynamic7 = ref(false);
const ifdynamic8 = ref(false);

const ifdynamic9 = ref(false);
const ifdynamic10 = ref(false);
const ifdynamic11 = ref(false);
const ifdynamic12 = ref(false);
const ifdynamic13 = ref(false);
const rowData = ref("");
const rowDatas = ref("");
const tableColumns = ref([]);
const selectedRowsRef = ref([]);
const handleSelectionChange = (val) => {
  selectedRowsRef.value = val;
};
const emit = defineEmits(["rowData"], ["rowDatas"]);
const RowClick = (row) => {
  if (ifRowChoose.value) {
    table.value.toggleRowSelection(row);
    return;
  }
  rowData.value = row;
  emit("rowData", row);
  dialogTableVisible.value = false;
};
const ifRowChooseClick = (row) => {
  emit("rowDatas", selectedRowsRef.value);
  dialogTableVisible.value = false;
};
const apiUrl = ref("");
const requestData = computed(() => ({
  info: {
    uniqueCode: input1.value,
    modelName: input2.value,
    ecsName: input3.value,
    structureName: input4.value,
    flag: "17",
    bus_type: input5.value,
    unique_code: "",
    state: "",
    ratify_state: "",
    material_state: "",
    circulation_state: "",
    lock: "0",
    id: "",
    oper_mode: input6.value,
  },
  pageInfo: {
    page: page.value,
    limit: limit.value,
  },
}));
const searchInput = async () => {
  try {
    selectedRowsRef.value = [];
    console.log(input6.value);
    console.log(requestData.value);
    const res = await crud.fetchData(apiUrl.value, "post", requestData.value);
    console.log(res);
    totalShou.value = true;
    const K3FlXxList = res.info;
    tableData.value = [];
    if (K3FlXxList.length === 0) {
      totalShou.value = false;
      total.value = 0;
      return;
    }
    tableData.value = K3FlXxList;
    total.value = K3FlXxList[0].total;
  } catch (error) {
    console.error("请求失败:", error);
  }
};

const handleSizeChange = (val: number) => {
  searchInput();
};
const handleCurrentChange = (val: number) => {
  searchInput();
};

const compareValue = ref("id");
const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
  if (
    selectedRowsRef.value.find(
      (selectedRow) => selectedRow[compareValue.value] === row[compareValue.value]
    )
  ) {
    return {
      backgroundColor: "#DFF0DB !important",
      borderColor: "#B9C9C7",
      padding: "4px",
    };
  } else {
    return { borderColor: "#B9C9C7", padding: "4px", margin: 0 };
  }
};
const headerCellStyle = {
  borderColor: "#B9C9C7",
  backgroundColor: "#F2F4FA",
  fontWeight: "bold",
  color: "#1F2129",
};

// 统一声明出去变量和方法
defineExpose({
  dynamicPlaceholder1, //第一个查询表单提示
  dynamicPlaceholder2, //第二个查询表单提示
  dynamicPlaceholder3, //第三个查询表单提示
  dynamicPlaceholder4, //第四个查询表单提示
  dynamicPlaceholder5, //第五个查询表单提示
  dynamicPlaceholder6, //第六个查询表单提示
  dynamicPlaceholder7,
  dynamicPlaceholder8,
  dynamicPlaceholder9,
  dynamicPlaceholder10,
  dynamicPlaceholder11,
  dynamicPlaceholder12,
  dynamicPlaceholder13,
  ifdynamic1, //第一个表单是否存在 true/false
  ifdynamic2, //第二个表单是否存在 true/false
  ifdynamic3, //第三个表单是否存在 true/false
  ifdynamic4, //第四个表单是否存在 true/false
  ifdynamic5, //第五个表单是否存在 true/false
  ifdynamic6, //第六个表单是否存在 true/false
  ifdynamic7,
  ifdynamic8,
  ifdynamic9,
  ifdynamic10,
  ifdynamic11,
  ifdynamic12,
  ifdynamic13,
  input1, //第一个表单内容
  input2, //第二个表单内容
  input3, //第三个表单内容
  input4, //第四个表单内容
  input5, //第五个表单内容
  input6, //第六个表单内容
  input7,
  input8,
  input9,
  input10,
  input11,
  input12,
  input13,

  tableColumns, //自定义表格内容
  searchInput, //查询按钮
  rowData, //单选内容
  apiUrl, //请求地址
  dialogTableVisible, //打开弹窗 true/false
  requestData, //传递参数
  // 多选控制
  ifRowChoose, //是否多选
  compareValue, //多选点击行控制（默认id）
  rowDatas, //多选内容
});
const handleClose = (done: () => void) => {
  input1.value = "";
  input2.value = "";
  input3.value = "";
  input4.value = "";
  input5.value = "";
  input6.value = "";
  input7.value = "";
  input8.value = "";
  input9.value = "";
  input10.value = "";
  input11.value = "";
  input12.value = "";
  input13.value = "";
  selectedRowsRef.value = [];
  //   page.value = 1;
  //   limit.value = 10;
  //   total.value = 0;
  tableData.value = [];
  rowData.value = "";
  rowDatas.value = "";
  done();
};
</script>
<style scoped>
.dialogDiv {
  position: relative;
  top: 10px;
}
</style>
